<template>
  <div>
    <a-modal
      :title="'编辑'+mdl.name"
      :width="640"
      :visible="visibles"
      :confirmLoading="confirmLoading"
      @ok="editSubmit('ruleForm')"
      @cancel="visibles = false"
      :destroyOnClose="true"
      :keyboard="false"
    >
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
          <a-form-model-item has-feedback label="姓名" prop="name">
            <a-input v-model="ruleForm.name" autocomplete="off" @change="$forceUpdate()" />
          </a-form-model-item>
          <a-form-model-item label="所属角色" prop="role_ids">
            <a-select placeholder="请选择所属角色" v-model="ruleForm.role_ids" @change="$forceUpdate()" :disabled="ruleForm.is_top_admin==1" allowClear mode="multiple">
              <a-select-option
                v-for="(item,index) in rolesList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
            <div class="noticeDiv">选择角色后，该用户将获得对应的权限。</div>
          </a-form-model-item>
          <a-form-model-item label="所在部门">
            <a-select
              placeholder="请选择所在部门"
              v-model="ruleForm.structures_ids"
              allowClear
              mode="multiple"
              @change="$forceUpdate()"
            >
              <a-select-option
                v-for="(item,index) in frameWorkList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="性别">
            <a-radio-group v-model="ruleForm.sex" @change="$forceUpdate()">
              <a-radio :value="1">男</a-radio>
              <a-radio :value="2">女</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="手机号">
            <span>{{ruleForm.phone}}</span>
          </a-form-model-item>
          <a-form-model-item label="是否授课">
            <a-switch v-model="ruleForm.is_teaching" @change="$forceUpdate()" />
            <div class="noticeDiv">如果员工需要授课，请开启授课状态</div>
          </a-form-model-item>
          <a-form-model-item label="擅长科目" v-if="ruleForm.is_teaching">
            <a-select
              style="width:280px;"
              v-model="ruleForm.subject_ids"
              mode="multiple"
              placeholder="请选择擅长科目"
              @change="$forceUpdate()"
            >
              <a-select-option
                v-for="(item,index) in subjectList"
                :key="index"
                :value="item.id"
                v-if="item.is_enable==1"
              >{{item.name}}</a-select-option>
            </a-select>
            <span style="color:blue;cursor:pointer;float:right; " @click="showChild">科目管理</span>
          </a-form-model-item>

          <a-form-model-item label="备注">
            <a-input v-model="ruleForm.remark" placeholder="请输入备注(最多输入100个字符)" :max-length="100" @change="$forceUpdate()" />
          </a-form-model-item>

          <!-- is_teaching -->
        </a-form-model>
      </a-spin>
    </a-modal>
    <subject-model ref="subj_model" @reload="reloadSelect" />
  </div>
</template>

<script>
import { accountList, accountCreate, accountDel, accountEdit, accountSureDel, roleList } from '@/api/account'
import { campusList } from '@/api/structure'
import { subjectList } from '@/api/subject'
import { changeUserInfo } from '@/api/login'
import subjectModel from '@/components/subjectsModel'
export default {
  name: 'userInfoModel',
  data() {
    return {
      visibles: false,
      confirmLoading: false,
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      mdl: {},
      ruleForm: {
        role_ids:[],
      },
      rules: {
        name: [{ required: true, message: '请输入姓名！' }],
        role_ids: [{ required: true, message: '请选择所属角色' ,trigger: 'change'}]
      },
      //下拉
      rolesList: [],
      frameWorkList: [],
      subjectList: []
    }
  },
  components: {
    subjectModel
  },
  created() {
    this.getList()
  },
  props: ['type'],
  methods: {
    getList() {
      roleList({
        school_id: this.$store.state.user.school,
        pageSize: 99999999999
      }).then(res => {
        this.rolesList = res.data
      })
      campusList({
        school_id: this.$store.state.user.school,
        type: 2
      }).then(res => {
        this.frameWorkList = res
      })
      subjectList({
        pageSize: 999999,
        school_id: this.$store.state.user.school
      })
        .then(res => {
          this.subjectList = res.data
        })
        .catch(error => {
          this.$message.error(err.data.message || '获取授课科目失败')
        })
    },
    showVisible(record) {
      this.mdl = Object.assign({}, record)
      this.ruleForm.name = record.name
      this.ruleForm.phone = record.phone
      this.ruleForm.remark = record.remark
      this.ruleForm.is_teaching = record.is_teaching
      this.ruleForm.teachType = record.is_teaching
      this.ruleForm.role_ids = record.role_ids
      this.ruleForm.sex = record.sex ? record.sex : 1
      this.ruleForm.subject_ids = record.subject_ids ? record.subject_ids : undefined
      this.ruleForm.structures_ids = record.structures_ids
      this.ruleForm.is_top_admin = record.is_top_admin
      this.getList()
      this.confirmLoading = false
      this.visibles = true
      this.$emit('closeLoading')
    },
    editSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.mdl.id) {
            let params = this.ruleForm
            this.confirmLoading = true
            changeUserInfo(Object.assign(params, { school_id: this.$store.state.user.school }), this.mdl.id)
              .then(res => {
                this.$message.success('修改成功')
                this.mdl = {}
                this.visibles = false
                this.confirmLoading = false
                this.$emit('reload')
              })
              .catch(err => {
                this.$message.error(err.data.message || '修改失败')
                this.confirmLoading = false
              })
          } else {
            return
          }
        } else {
          return false
        }
      })
    },
    reloadSelect() {
      subjectList({
        pageSize: 999999,
        school_id: this.$store.state.user.school
      })
        .then(res => {
          this.subjectList = res.data
        })
        .catch(error => {
          this.$message.error(err.data.message || '获取授课科目失败')
        })
    },
    showChild() {
      this.$refs.subj_model.showModal()
    }
  },
  watch:{
    'ruleForm.role_ids'(val){
        console.log(val,'role')
    }
  },
}
</script>

<style lang="less" scoped>
.noticeDiv {
  color: #ccc;
  font-size: 12px;
  line-height: 20px;
  font-size: 12px;
  line-height: 20px;
}
</style>